import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import ResponsiveImage from '@/components/ResponsiveImage'
import css from './prize.module.scss'
export default class LotteryPrize extends PureComponent {
    static propTypes = {
        prizes: PropTypes.object
    }

    get hasFirstPrize() {
        return this.props?.prizes?.first_prize > 0 ?? false
    }
    get firstPrizeDesc() {
        return this.props?.prizes?.first_prize_cmt ?? ''
    }
    get firstPrizeImg() {
        return this.props?.prizes?.first_prize_pic ?? ''
    }
    get hasSecondPrize() {
        return this.props?.prizes?.second_prize > 0 ?? false
    }
    get secondPrizeImg() {
        return this.props?.prizes?.second_prize_pic ?? ''
    }
    get secondPrizeDesc() {
        return this.props?.prizes?.second_prize_cmt ?? ''
    }
    get hasThirdPrize() {
        return this.props?.prizes?.third_prize > 0 ?? false
    }
    get thirdPrizeImg() {
        return this.props?.prizes?.third_prize_pic ?? ''
    }
    get thirdPrizeDesc() {
        return this.props?.prizes?.third_prize_cmt ?? ''
    }

    render() {
        return (
            <div className={css["wrap"]}>
                <div className={css["title"]}>奖品</div>
                <ul className="list">
                    { this.hasFirstPrize && <li>
                        { this.firstPrizeImg ? <ResponsiveImage className="img" src={this.firstPrizeImg} size="@90w_90h_1c" /> : <div className="img-wrap"></div>}
                        <div className="level">一等奖</div>
                        <div className="desc">{this.firstPrizeDesc}</div>
                    </li> }

                    { this.hasSecondPrize && <li>                        
                        { this.secondPrizeImg ? <ResponsiveImage className="img" src={this.secondPrizeImg} size="@90w_90h_1c" /> : <div className="img-wrap"></div>}
                        <div className="level">二等奖</div>
                        <div className="desc">{this.secondPrizeDesc}</div>
                    </li> }
                    
                    { this.hasThirdPrize && <li>                        
                        { this.thirdPrizeImg ? <ResponsiveImage className="img" src={this.thirdPrizeImg} size="@90w_90h_1c" /> : <div className="img-wrap"></div>}
                        <div className="level">三等奖</div>
                        <div className="desc">{this.thirdPrizeDesc}</div>
                    </li> }
                </ul>
            </div>
        )
    }
}
